import React,{Component} from 'react';
import './companycontact.scss';
import { contact, getIndexInfo } from 'api/company.js';
import { Map, Marker, NavigationControl } from 'react-bmap';
export default class Componentcontact extends Component{
	constructor (props) {
		super(props)
		this.state={
			shop_info: {},
			contactInfo:{},
			lat: '',
			lng: ''
		}
	}
	_contact () { //店铺联系我们接口
		contact({
			shop_id:this.props.shop_id
		}).then(res => {
			if(res.code === 1){
				this.setState({
					contactInfo:res.data
				},() => {
					this.searchByStationName();
				})
			}
		})
	}
	searchByStationName () {
		//eslint-disable-next-line
		var map = new BMap.Map();
		//eslint-disable-next-line
		var localSearch = new BMap.LocalSearch(map);
		var that = this;
		map.clearOverlays(); //清空原来的标注
		localSearch.setSearchCompleteCallback(function(searchResult) { //根据地址解析成经纬度
      var poi = searchResult.getPoi(0);
      if (poi) {
      	that.setState({
      		lng: poi.point.lng,
      		lat:poi.point.lat
      	})
      }
	  })
	  localSearch.search(this.state.contactInfo.address);
	}
	componentDidMount () {
		getIndexInfo({
			shop_id: this.props.shop_id
		}).then(res => {
			if(res.code === 1) {
				Object.keys(res.data).forEach(key => {
					if(key === 'shop_info '){
						this.setState({
							shop_info:res.data[key]
						})
					}
				})
			}
		})
		this._contact();
	}
	render(){
		return(
			<div className="company_contact">
				<div className="company_info">{this.state.shop_info.company_intro}</div>
				<div className="company_news">
					<p><span className="glyphicon glyphicon-user1"></span>联系人：{this.state.contactInfo.username}</p>
					<p><span className="glyphicon glyphicon-mobile"></span>手&nbsp;&nbsp; 机：{this.state.contactInfo.mobile}</p>
					<p><span className="glyphicon glyphicon-tel"></span>座&nbsp;&nbsp; 机：{this.state.contactInfo.phone}</p>
					<p><span className="glyphicon glyphicon-emil"></span>邮&nbsp;&nbsp; 箱：{this.state.contactInfo.mail}</p>
					<p><span className="glyphicon glyphicon-location"></span>地&nbsp;&nbsp; 址：{this.state.contactInfo.address}</p>
					<div className="ditu">
						<Map center={{lng: this.state.lng, lat: this.state.lat}} zoom="12">
	            <Marker position={{lng: this.state.lng, lat: this.state.lat}} />
	            <NavigationControl />
	          </Map>
					</div>
				</div>
			</div>
		)
	}
}